<template>
  <div id="navbar">
    <div class="lww_header">
      <div class="header_wrap">
        <div class="header_logo">
          <a href="javascript:void(0);" class="lww_logo"></a>
        </div>
        <ul class="header_nav">
          <li
            name="index"
            :class="{
              header_nav_active:
                $route.name === item.path || $route.name === item.another
                  ? true
                  : false,
            }"
            @click="toPagesButton(item.path)"
            v-for="(item, index) in navList"
            :key="index"
          >
            <a href="javascript:void(0)">{{ item.text }}</a>
          </li>
          <li name="">
            <a href="javascript:void(0);">
              去旅行
              <i class="icon_caret_down"></i>
            </a>
          </li>
          <li name="">
            <a href="javascript:void(0);">
              社区
              <i class="icon_caret_down"></i>
            </a>
          </li>
        </ul>
        <div class="header_search">
          <input type="text" />
          <a class="icon_search"></a>
        </div>
        <div class="login_info" :style="{ display: token ? 'block' : 'none' }">
          <!-- <div> -->

          <!-- </div> -->
          <div class="head_user">
            <a href="./index.html">
              <img src="../../public/img/default.jpg" id="login_user_headUrl" />
              <i class="icon_caret_down"></i>
              <a
                href="javascript:void(0);"
                @click="loginOutButton"
                style="padding-left: 2px;"
              >
                退出登录
              </a>
            </a>
          </div>
          <div class="header_msg">
            消息
            <i class="icon_caret_down"></i>
          </div>
          <div class="header_daka">
            <a href="javascript:void(0);">打卡</a>
          </div>
        </div>
        <div class="login-out" v-show="!token">
          <a
            class="weibo-login"
            href="./login.html"
            title="微博登录"
            rel="nofollow"
          ></a>
          <a
            class="qq-login"
            href="./login.html"
            title="QQ登录"
            rel="nofollow"
          ></a>
          <a
            class="weixin-login"
            href="./login.html"
            title="微信登录"
            rel="nofollow"
          ></a>
          <a
            id="_j_showlogin"
            title="登录骡窝窝"
            rel="nofollow"
            @click="$router.push('login')"
          >
            登录
          </a>
          <span class="split">|</span>
          <a
            href="jsvascript:void(0)"
            title="注册帐号"
            rel="nofollow"
            @click="registerButton"
          >
            注册
          </a>
        </div>
      </div>
      <div class="shadow"></div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      navList: [
        { path: 'home', text: '首页' },
        { path: 'destination', text: '目的地', another: 'destinationDetail' },
        { path: 'strategyIndex', text: '旅游攻略', another: 'strategyDetail' },
        { path: 'travelIndex', text: '旅游日记', another: 'travelDetail' },
      ],
    }
  },

  mounted() {
    this.setToken(localStorage.getItem('token'))
    console.log('router', this.$route.name)
  },

  computed: {
    ...mapState({
      token: (state) => state.user.token,
    }),
  },
  methods: {
    ...mapMutations(['setToken']),
    // 退出登录按钮
    loginOutButton() {
      localStorage.clear()
      this.setToken('')
    },

    // 注册按钮
    registerButton() {
      this.$router.push('register')
    },

    // 导航跳转
    toPagesButton(path) {
      console.log(path)
      if (!(this.$route.name === path)) {
        this.$router.push(path)
      }
    },
  },
}
</script>

<style scoped></style>
